<template>
    <div>
        <h1>设置密码</h1>
        <p v-if="errorMessage" style="color:red;">{{ errorMessage }}</p>
        <form @submit.prevent="register" style="display: flex;">
            <div>
                <label>QQ号</label>
                <input type="number" placeholder="在群里的QQ" v-model.number="username" required>
            </div>
            <div>
                <label>密码</label>
                <input type="password" v-model="password" required>
            </div>
            <div>
                <label>确认密码</label>
                <input type="password" v-model="confirmPassword" required>
            </div>
            <button type="submit">提交</button>
            <br>
            <router-link to="/login">已设置？登录</router-link>
        </form>

    </div>
</template>
  
<script>
export default {
    data() {
        return {
            username: '',
            password: '',
            confirmPassword: '',
            errorMessage: ''
        }
    },
    methods: {
        register() {
            if (this.password !== this.confirmPassword) {
                this.errorMessage = '两次输入的密码不一致'
                return
            }

            const userData = {
                qqNum: this.username,
                password: this.password,
                confirmPassword: this.confirmPassword
            }

            fetch('/api/sign', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(userData)
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 0) {
                        localStorage.removeItem('token')
                        this.$router.push('/login')
                    } else {
                        this.errorMessage = data.msg
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.errorMessage = '网络错误，请稍后再试'
                })
        }
    }
}
</script>
  
<style>
.container {
    max-width: 400px;
    margin: auto;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

.form-group input {
    display: block;
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.form-group input:focus {
    outline: none;
    border-color: #007bff;
}

.btn {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.btn:hover {
    background-color: #0069d9;
}

.error-msg {
    color: red;
    font-size: 14px;
    margin-top: 10px;
}

.success-msg {
    color: green;
    font-size: 14px;
    margin-top: 10px;
}
</style>
  